<template>
	<view class="uni-steps">
		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
				<view v-for="(item,index) in options" :key="index"
					:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
					<view v-if="index==0" class="oneBox">
						<view>领红包下单</view>
						<view class="redPacketBtn" @click="skipApplet">领外卖红包</view>
					</view>
					<view v-else-if="index==1" class="twoBox">
						<view>扫描商家二维码快捷进店/在平台搜索<br />餐品关键词浏览进店（如螺蛳粉）</view>
						<image :src="buildImgUrl(objData.qrCodeImg)" show-menu-by-longpress="true" class="qrCode"
							@click="codeClick"></image>
					</view>
					<view v-else-if="index==2" class="threeBox">
						<view>上传订单截图(含订单号)</view>
						<view class="flex center residue">
							<view>剩余:</view>
							<uni-countdown :show-day="false" :show-hour="false" :minute="objData.mins"
								:second="objData.secs" :show-colon="false" ref="timedown" />
						</view>
						<view class="flex">
							<view class="flex lookBox" @click="look">
								<image
									src="https://gfgn.oss-cn-beijing.aliyuncs.com/%E6%9F%A5%E7%9C%8B%E5%AE%9E%E4%BE%8B.png"
									class="icon"></image>
								<view>查看实例</view>
							</view>
							<view class="flex lookBox uploadBox" @click="uploadpic(0)" v-if="orderNoImage">
								<image :src="orderNoImage" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="flex lookBox uploadBox" @click="uploadpic(0)" v-else>
								<image src="../../../../static/index/Image.png" class="icon"></image>
								<view>上传凭证</view>
							</view>
						</view>
					</view>
					<view v-else-if="orderType!=1" class="fourBox">
						<view>评价截图/用餐凭证请于6小时内上传，超时订单将自动取消，无法获得平台返利</view>
						<view class="flex">
							<view class="  " style="margin-top:38rpx ;" v-if="orderProofImage">
								<!-- <image :src="orderProofImage" style="width: 100%;height: 100%;"></image> -->
							</view>
							<view class="flex lookBox uploadBox" style="margin-top:38rpx ; background-color: #fff;"
								v-else>
								<!-- <image src="../../../../static/index/Image.png" class="icon"></image>
								<view>上传评价截图</view> -->
							</view>
						</view>
					</view>
					<view v-else-if="index==3&&orderType==1" class="fourBox">
						<view>上传评价截图</view>
						<view class="flex">
							<view class="flex lookBox uploadBox" style="margin-top:38rpx ;" @click="uploadpic(1)"
								v-if="orderProofImage">
								<image :src="orderProofImage" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="flex lookBox uploadBox" style="margin-top:38rpx ;" @click="uploadpic(1)"
								v-else>
								<image src="../../../../static/index/Image.png" class="icon"></image>
								<view>上传评价截图</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
					v-for="(item,index) in options" :key="index">

					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']">
						<view class="numCode">{{index+1}}</view>
					</view>
					<view
						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		buildImgUrl
	} from '@/utils/me.js'
	import UploadImageS from '@/utils/upload_image.js'
	export default {
		name: 'UniSteps',
		props: {
			direction: {
				// 排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: {
				// 激活状态颜色
				type: String,
				default: '#2979FF'
			},
			options: {
				type: Array,
				default () {
					return []
				}
			}, // 数据
			objData: {
				type: Object,
				default () {
					return []
				}
			}, // 数据
		},
		data() {
			return {
				buildImgUrl,
				orderNoImage: '',
				orderProofImage: '',
				orderType: 0
			}
		},
		methods: {
			timeUpdate() {
				this.$nextTick(() => {
					this.$refs.timedown[0].update()
				})
			},
			uploadpic(type) {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// 开始上传
						new UploadImageS(tempFilePaths, {
							complete: function(res) {
								type == 0 ? that.orderNoImage = res[0].img_url : that
									.orderProofImage =
									res[0].img_url
							},
						})
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			look() {
				let imgArr = ['https://gfgn.oss-cn-beijing.aliyuncs.com/%E6%9F%A5%E7%9C%8B%E5%AE%9E%E4%BE%8B.png']
				uni.previewImage({
					current: imgArr[0],
					urls: imgArr,
				});
			},
			skipApplet() {
				this.$emit('navWx')
			},
			codeClick() {
				this.$emit('codeAlert')
			}
		}
	}
</script>

<style lang="scss">
	.fourBox {
		margin-left: 52rpx;
	}

	.lookBox {
		width: 156rpx;
		height: 156rpx;
		border-radius: 12rpx;
		background: #FD4545;
		border: 2rpx dashed #FD4545;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: -0.48px;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		flex-direction: column;
		align-items: center;
	}

	.uploadBox {
		background: #FDCC45;
		font-family: Source Han Sans CN;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 40rpx;
		letter-spacing: -0.48px;
		font-variation-settings: "opsz" auto;
		color: #333333;
		border: none;
		margin-left: 62rpx;
	}

	.residue {
		margin: 18rpx 0 52rpx;
	}

	.qrCode {
		width: 252rpx;
		height: 252rpx;
		margin-top: 38rpx;
		margin-left: 82rpx;
	}

	.threeBox {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		margin-left: 52rpx;
		margin-top: -50rpx;
	}

	.twoBox {
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		margin-left: 46rpx;
	}

	.redPacketBtn {
		width: 470rpx;
		height: 76rpx;
		border-radius: 210rpx;
		opacity: 1;
		background: #FDCC45;
		line-height: 76rpx;
		text-align: center;
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: bold;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #333333;
		margin: 78rpx 0 88rpx;
	}

	.oneBox {
		margin-left: 30rpx;
		font-family: Source Han Sans CN;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		padding-top: 10rpx;
	}

	.numCode {
		width: 52rpx;
		height: 52rpx;
		font-family: Source Han Sans CN;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 52rpx;
		letter-spacing: 0em;
		font-variation-settings: "opsz" auto;
		color: #FFFFFF;
		background: #FD4545;
		border-radius: 50rpx;
		text-align: center;
		z-index: 99;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
		margin: 44rpx 0 14rpx;
	}

	.qrCode {
		width: 252rpx;
		height: 252rpx;
	}

	$uni-primary: #2979ff !default;
	$uni-border-color: #EDEDED;

	.uni-steps {
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.uni-steps__column {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row-reverse;
	}

	.uni-steps__row-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: flex-end;
		margin-bottom: 8px;
	}

	.uni-steps__column-text-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
	}

	.uni-steps__row-text {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.uni-steps__column-text {
		// padding: 6px 0px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		height: auto;
		padding-bottom: 90rpx;
	}

	.uni-steps__row-title {
		font-size: 14px;
		line-height: 16px;
		text-align: center;
	}

	.uni-steps__column-title {
		font-size: 14px;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-desc {
		font-size: 12px;
		line-height: 14px;
		text-align: center;
	}

	.uni-steps__column-desc {
		font-size: 12px;
		text-align: left;
		line-height: 18px;
	}

	.uni-steps__row-container {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.uni-steps__column-container {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		width: 30px;
		flex-direction: column;
	}

	.uni-steps__row-line-item {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__column-line-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		flex: 1;
		align-items: center;
		justify-content: center;
	}

	.uni-steps__row-line {
		flex: 1;
		height: 1px;
		background-color: #B7BDC6;
	}

	.uni-steps__column-line {
		width: 1px;
		background-color: #B7BDC6;
	}

	.uni-steps__row-line--after {
		transform: translateX(1px);
	}

	.uni-steps__column-line--after {
		flex: 1;
		transform: translate(0px, 1px);
	}

	.uni-steps__row-line--before {
		transform: translateX(-1px);
	}

	.uni-steps__column-line--before {
		height: 6px;
		transform: translate(0px, -13px);
	}

	.uni-steps__row-circle {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #B7BDC6;
		margin: 0px 3px;
	}

	.uni-steps__column-circle {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: #B7BDC6;
		margin: 4px 0px 5px 0px;
	}

	.uni-steps__row-check {
		margin: 0px 6px;
	}

	.uni-steps__column-check {
		height: 25px;
		line-height: 14px;
		margin: 2px 0px;
	}
</style>